<template>
    <div class="container">
        <div
            class="wrap"
            ref="tofile"
        >
            <div
                v-for="(item,index) in dataList"
                :key="index"
                class="wrap-list"
                @click="fnShellCreate(item.title)"
            >
                <i
                    class="iconfont"
                    :class="item.icon"
                />
                <div>
                    <p class="wrap-content">
                        {{ item.content }}
                    </p>
                    <p class="wrap-title">
                        {{ item.title }}
                    </p>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import html2canvas from 'html2canvas';
export default {
    name: 'HelloWorld',
    components: {
    },
    data () {
        return {
            authResult: {},
            dataList: [{
                title: '数据文件导出',
                content: 'Data file export',
                icon: 'icon-daochu'
            },{
                title: '截图',
                content: 'screenshot',
                icon: 'icon-jietu'
            }]
        };
    },
    created () {
        this.$store.commit('head/SET_HEAD', [{title: '功能'}]);
        this.authResult = this.$route.meta.authResult;
        console.log(this.authResult);
    },
    methods: {
        /**
         * 执行功能
         */
        fnShellCreate (row) {
            switch (row) {
                case '数据文件导出':
                    this.fnJsonCsv();
                    break;
                case '截图':
                    this.fnScrenShot();
                    break;
                default:
                    break;
            }
        },

        /**
         * JSON数据导出CSV文件
         */
        fnJsonCsv () {
            JSonToCSV.setDataConver({
                data: [
                    {name: '张三', amont: '323433.56', proportion: 33.4},
                    {name: '李四', amont: '545234.43', proportion: 55.45}
                ],
                fileName: '数据报表',
                columns: {
                    title: ['姓名', '金额', '占比'],
                    key: ['name', 'amont', 'proportion'],
                    formatter: function(n, v) {
                        if(n === 'amont' && !isNaN(Number(v))) {
                            let v = '';

                            v = v + '';
                            v = v.split('.');
                            v[0] = v[0].replace(/(\d)(?=(?:\d{3})+$)/g, '$1,'); // 千分位的设置
                            return v.join('.');
                        }
                        if(n === 'proportion') return v + '%';
                    }
                }
            });
        },

        /**
         * 截图
         */
        fnScrenShot () {
            html2canvas(this.$refs.tofile,{
                backgroundColor: null, //避免图片有白色边框
                allowTaint: false,
                taintTest: true
            }).then((canvas) => {
                let dataURL = canvas.toDataURL("image/png");

                this.fnDownLoadFile('自定义名称.png', dataURL);
            });
        },

        /**
         * 下载base64图片
         * @param   {String}    fileName        //图片名称
         * @param   {String}    content         //base64
         */
        fnDownLoadFile (fileName, content) {
            let aLink = document.createElement('a');

            let blob = this.base64ToBlob(content);

            let evt = document.createEvent("HTMLEvents");

            evt.initEvent("click", true, true);//initEvent 不加后两个参数在FF下会报错  事件类型，是否冒泡，是否阻止浏览器的默认行为
            aLink.download = fileName;
            aLink.href = URL.createObjectURL(blob);

            aLink.dispatchEvent(new MouseEvent('click', {bubbles: true, cancelable: true, view: window}));//兼容火狐
        },

        /**
         * base64转换blob
         */
        base64ToBlob(code) {
            let parts = code.split(';base64,');

            let contentType = parts[0].split(':')[1];

            let raw = window.atob(parts[1]);

            let rawLength = raw.length;

            let uInt8Array = new Uint8Array(rawLength);

            for (let i = 0; i < rawLength; ++i) {
                uInt8Array[i] = raw.charCodeAt(i);
            }
            return new Blob([uInt8Array], {type: contentType});
        }
    }
};
</script>

<style lang="less" scoped>
.container {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    background: #f0f2f5;
    margin-top: 5px;
    margin-bottom: 15px;
    padding: 0px 15px 15px 15px;
    .wrap {
        width: 100%;
        padding: 24px;
        box-sizing: border-box;
        margin-top: 10px;
        display: flex;
        flex-wrap: wrap;
        &-list {
            background: #fff;
            width: 254px;
            height: 108px;
            display: flex;
            align-items: center;
            border-radius: 4px;
            cursor: pointer;
            margin-bottom: 25px;
            margin-right: 30px;
            .iconfont {
                font-size: 50px;
                color: rgb(86, 204, 197);
                margin: 0 40px 0 30px;
            }
            .wrap-content {
                font-size: 16px;
                color: rgba(0,0,0,.45);
                margin-bottom: 12px;
                font-weight: 500;
            }
            .wrap-title {
                font-size: 16px;
                color: #666;
                font-weight: 500;
            }
        }
    }
}
</style>
